/*
    * @module:views/budget/construction
    * @author:silas
    * @date:2021-01-26
    * 滚投结构上报
*/
<template>
  <div class="compilationSummary">
    <div class="contentTopTitle">
      <div class="fl">
        <div class="title">滚投结构上报</div>
      </div>
    </div>
    <div>
      <el-form :inline="true" :model="form" label-width="70px" class="formList">
        <el-form-item label="年度">
          <el-date-picker
            v-model="form.year"
            type="year"
            placeholder="选择年"
            value-format="yyyy"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="区域">
          <dx-cascader
            :area_id.sync="form.areaId"
            :area_name.sync="form.areaName"
            :area_lvl.sync="form.areaLvl"
            ref="cascader"
          />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="form.status" clearable>
            <el-option
              v-for="(it, i) in status"
              :key="i"
              :label="it.label"
              :value="it.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <div class="g-btn-wrapper">
            <div class="g-cell">
              <el-button
                size="small"
                style="margin-left: 12px"
                type="primary"
                @click="search"
                >查询</el-button
              >
            </div>
            <div class="g-btns">
              <el-button
                class="downloadBtn"
                size="mini"
                @click="template_download()"
                >模板下载</el-button
              >
              <el-button
                size="mini"
                type="orange"
                @click="
                  dialogVisible = true;
                  fileList = [];
                  importForm.id = '';
                  importForm.description = '';
                  
                "
                >导入</el-button
              >
            </div>

            <!-- <el-upload
              class="upload-demo"
              action="/api/releaseReport/importReleaseReport"
              :limit="1"
              :data="params"
              :on-success="importTarget"
              :on-progress="progress"
              :on-error="errorUpload"
              :show-file-list="false"
            >
              <el-button size="small" type="orange">导入</el-button>
            </el-upload> -->
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-content clearfix">
      <div class="tableBox">
        <el-table
          v-loading="tableLoading"
          :data="tableData"
          style="width: 100%"
          class="tableTh28"
          height="73vh"
          stripe
        >
          <el-table-column
            label="预算说明"
            width="120"
            prop="rexplain"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="version"
            label="上报版本"
            width="110"
          ></el-table-column>
          <el-table-column
            prop="areaName"
            label="上报单位"
            width="120"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="reportUserName"
            label="上报人"
            width="90"
          ></el-table-column>
          <el-table-column
            prop="createTime"
            label="上报时间"
            width="100"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="description"
            label="上报说明"
            min-width="150"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="auditUserName"
            label="审核人"
            min-width="100"
          ></el-table-column>
          <el-table-column
            prop="auditTime"
            label="审核时间"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="auditExplain"
            label="审核说明"
            min-width="180"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column prop="state" label="审核状态" />
          <el-table-column label="操作" width="100" class-name="iconColor">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="handleDetail(scope.row)"
                >查看</el-button
              >
              <el-button size="mini" v-if="scope.row.status == 0 || scope.row.status == 2" type="text" @click="handleDel(scope.row)"
                >删除</el-button
              >
              <el-button size="mini" v-if="scope.row.status == 1" type="text"  @click="handleVoid(scope.row)">作废</el-button>
              <!-- <el-tooltip
                class="item" 
                effect="dark"
                content="查看"
                placement="bottom"
              >
                <i
                  class="iconfont icon-chakan"
                  @click="
                    $router.push({
                      path: '/budget/seeGuide',
                      query: { targetId: scope.row.targetId },
                    })
                  "
                ></i>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="删除"
                placement="bottom"
              >
                <i
                  :class="['iconfont', 'icon-bianji', 'is-disabled']"
                  v-if="scope.row.status == '1'"
                ></i>
                <i
                  :class="['iconfont', 'icon-bianji']"
                  v-else
                  @click="
                    $router.push({
                      path: '/budget/correctGuide',
                      query: { targetId: scope.row.targetId },
                    })
                  "
                ></i>
              </el-tooltip> -->
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog
      title="导入"
      append-to-body
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-form :model="importForm" ref="importForm" :rules="rules">
        <el-form-item label="预算项" label-width="80px" prop="id">
          <el-select v-model="importForm.id">
            <el-option
              v-for="(it, i) in idList"
              :key="i"
              :label="it.label"
              :value="it.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="文件导入" label-width="80px">
          <el-upload
            :limit="1"
            accept=".xls, .xlsx"
            class="avatar-uploader"
            :auto-upload="false"
            :file-list="fileList"
            :on-change="changeFile"
            action
          >
            <el-button size="mini" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="说明" label-width="80px" prop="description">
          <el-input
            v-model="importForm.description"
            autocomplete="off"
            placeholder="请输入说明"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="handle_import"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import tab3 from "@/views/budget/compilationSummary/compilationSummary-tab3";
import prefixAPI from "@/api/prefixAPI";
import { getCookie } from "@/common/js/cookie";
import { getSessionStorage } from "@/common/js/storage";
import { $budgetAPI } from "@/api";
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
  name: "historyBudgeting",
  components: {
    // tab1,
    // tab2,
    // tab3,
  },
  data() {
    return {
      backRecord: false,
      form: {
        year: "",
        areaId: "",
        status: "",
      },
      status: [
        {
          label: "待审核",
          value: 0,
        },
        {
          label: "审核通过",
          value: 1,
        },
        {
          label: "审核失败",
          value: 2,
        },
      ],
      activeName: "first",
      accountInfo: "",
      tableData: [],
      tableLoading: false,
      dialogVisible: false,
      fileList: [],
      idList: [],
      importForm: {
        id: "",
        description: "",
      },
      rules: {
        id: [{ required: true, message: "请选择预算项", trigger: "blur" }],
        description: [
          { required: true, message: "请输入说明", trigger: "blur" },
        ],
      },
      param: "",
    };
  },
  computed: {
    // params() {
    //   let obj = {
    //     token: getCookie("token"),
    //     areaId: this.form.areaId,
    //     year: this.form.year,
    //     importFlag: this.form.resourceId,
    //     flag: this.flag,
    //   };
    //   return obj;
    // },
    areaSelect() {
      return this.form.areaSelect;
    },
  },
  created() {
    var that = this;

    that.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
    that.form.areaId = that.accountInfo.areaId;
    that.form.year = that.moment().format("YYYY");
    this.init();
  },
  // mounted() {
  //   this.init();
  // },
  methods: {
    //查询
    search() {
      let params = {
        testYear: this.form.year,
        areaId: this.form.areaId ? this.form.areaId : this.accountInfo.areaId,
        status: this.form.status,
      };
      this.listResourceData(params);
    },
    errorUpload(err, file, fileList) {
      this.loading.close();
    },
    progress(event, file, fileList) {
      this.loading = this.$loading({
        lock: true,
        text: "正在导入",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
    },
    //导入成功的回调
    importTarget(response, file, fileList) {
      this.alertError(response);
      this.loading.close();
      if (response.code == 0) {
        this.$message({
          type: "success",
          message: "导入成功",
        });
        this.form.resourceId = true;
        this.getData(this.flag);
      }
    },
    // 模板下载
    template_download() {
      let token = getCookie("token");
      let year = this.form.year;
      // 根据不同模式切换不同的路径
      if (process.env.NODE_ENV == "development") {
        window.location.href =
          prefixAPI.loc +
          "/api/releaseReport/downLoadTemplate?testYear=" +
          year +
          "&token=" +
          token;
      } else if (process.env.NODE_ENV == "production") {
        window.location.href =
          prefixAPI.hp +
          "/api/releaseReport/downLoadTemplate?testYear=" +
          year +
          "&token=" +
          token;
      }
    },
    // 批量导入上传文件传递数据
    changeFile(file, fileList) {
      this.fileList = fileList;
      this.param = new FormData();
      this.param.append("file", file.raw);
    },
    listResourceData(params) {
      var that = this, state = ['待审核','审核通过', '审核失败'];

      that.tableLoading = true;
      that.idList = [];
      $budgetAPI.getBudgetDownStatus(
        {
          acctYear: that.form.year,
        },
        (res) => {
          res.content.map((it) => {
            var obj = {
              label: it.rexplain,
              value: it.id,
            };
            that.idList.push(obj);
          });
        }
      );

      $budgetAPI.getConstruction(params, (res) => {
        if (res.content.length) {
          res.content.map((it) => {
            it.createTime = it.createTime && it.createTime.substr(0, 10);
            it.auditTime = it.auditTime && it.auditTime.substr(0, 10);
            it.state = state[it.status];
          });
        }
        that.tableData = res.content;
        that.tableLoading = false;
      });
    },
    handle_import() {
      var that = this;

      that.$refs["importForm"].validate((valid) => {
        if (valid) {
          if (that.fileList.length == 0) {
            that.$message({
              message: "请选择需要上传的文件",
              type: "warning",
            });
            return false;
          }
          that.param.append("token", getCookie("token"));
          that.param.append("areaId", that.form.areaId);
          that.param.append("testYear", that.form.year);
          that.param.append("rId", that.importForm.id);
          that.param.append("description", this.importForm.description);
          $budgetAPI.getImportReleaseReport(
            that.param,
            (res) => {
              if (res.code == 0) {
                that.$message({
                  message: "导入成功",
                  type: "success",
                });
                // this.getBudgetClearDataList();
                var params = {
                  testYear: that.form.year,
                  areaId: that.form.areaId,
                  status: that.form.status,
                };
                that.listResourceData(params);
              } else {
                that.$message.error(res.message);
              }
              that.dialogVisible = false;
            },
            (err) => {
              console.log(err);
              that.dialogVisible = false;
            }
          );
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    init() {
      let that = this,
        params = {
          testYear: that.form.year,
          areaId: that.form.areaId ? that.form.areaId : that.accountInfo.areaId,
          status: that.form.status,
        };
      that.listResourceData(params);
    },
    handleDetail(it) {
        this.$router.push({
            path: '/budget/constructionDetail',
            query: { id: it.id }
        });
    },
    handleDel(it) {
      var that = this;

      that.$confirm("是否确认删除?", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then((e) => {
          console.log(e);
          $budgetAPI.getDeleteReleaseRepor(
            {
              reportId: it.id,
            },
            (res) => {
              if (res.code == 0) {
                that.$message({
                  type: "success",
                  message: "删除成功",
                });
              } else {
                that.$message({
                  type: "error",
                  message: res.message,
                });
              }
               var params = {
                  testYear: that.form.year,
                  areaId: that.form.areaId,
                  status: that.form.status,
                };
                that.listResourceData(params);
            }
          );
        });
    },
    handleVoid(it) {
      var that = this;

      that.$confirm("是否确认作废?", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then((e) => {
          $budgetAPI.getVoid(
            {
              reportId: it.id,
            },
            (res) => {
              if (res.code == 0) {
                that.$message({
                  type: "success",
                  message: "作废成功",
                });
                
              } else {
                that.$message({
                  type: "error",
                  message: res.message,
                });
              }
              var params = {
                  testYear: that.form.year,
                  areaId: that.form.areaId,
                  status: that.form.status,
                };
              that.listResourceData(params);
            }
          );
        });
    }
  },
};
</script>

<style lang="scss" scoped>
.compilationSummary {
  .formList {
    padding-bottom: 20px;
  }
  .g-btn-wrapper {
    display: flex;
    .g-cell {
      flex: 1;
      button {
        padding: 7px 15px;
      }
    }
    .g-btns {
      text-align: right;
    }
  }
  .table-content {
    .table-header {
      display: flex;
      justify-content: space-between;

      .btn-right {
        display: flex;
      }

      .table-title {
        font-size: 14px;
        font-weight: bold;
        height: 30px;
        line-height: 30px;

        span {
          display: inline-block;
          width: 5px;
          height: 5px;
          background-color: #418ee9;
          border-radius: 1000%;
          overflow: hidden;
          margin-right: 10px;
          margin-bottom: 3px;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.compilationSummary {
  .formList {
    .el-form-item {
      width: 22%;
    }
    .el-form-item:last-child {
      width: 32%;
      .el-form-item__content {
        width: 100%;
      }
    }
    .el-form-item.btnBox {
      margin-bottom: 0px;
      width: 18%;
      margin-right: 0;

      .el-form-item__content {
        display: flex;
      }
    }
  }
}
</style>
